<template>
    <div class="schLine" v-if="!form">
        <div class="itemTitle">{{ title }}</div>
        <el-checkbox-group :disabled="disabled" v-model="curVal" size="mini" placeholder="请选择">
            <el-checkbox v-for="item in options" :label="item.value" border>{{item.label}}</el-checkbox>
        </el-checkbox-group>
    </div>
    <el-form-item label-width="120px" v-else style="margin:10px 10px" :required="required" :label="title" :prop="field">
        <el-checkbox-group :disabled="disabled" v-model="curVal" size="mini" placeholder="请选择" :style="{width: (100 * Number(size)) + 'px'}">
            <el-checkbox v-for="item in options" :label="item.value" border>{{item.label}}</el-checkbox>
        </el-checkbox-group>

    </el-form-item>
    
</template>

<script>
export default {
props: {
    disabled: {
        type: Boolean,
        default: false
    },
    multiple: {
        type: Boolean,
        default: false
    },
    form: {
        type: Boolean,
        default: false
    },
    field: {
        type: String,
        default: ""
    },
    required: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ""
    },
    value: {
        type: Array,
        default: ""
    },
    opType: {
        type: String,
        default: ""
    },
    size: {
        type: [String, Number],
        default: 3
    }
},

data() {
    return {
        curVal: [],
        options: []
    }
},
created() {
    let localOptions = this.$code[this.opType];
    if (localOptions) {
        this.options = localOptions;
    } else {
        //查询DB
        this.$sys.getOptions({code: this.opType}).then(res => {
            this.options = res.data;
        })
    }
},
watch: {
    value: {
        handler(nv, ov) {
            this.curVal = nv;
        },
        immediate: true
    },
    curVal(nv, ov) {
        this.$emit("input", nv);
    }
}
}
</script>

<style lang="scss" scoped></style>